{% extends "Cart/base.html" %}

{% block title %}搜索出的书籍内容{% endblock %}

{% block file %}
   <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/3.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-getUrlParam.js') }}"></script>
    <script type="text/javascript">
        var PageNumber=1;
        var Pages=1;
        function getPages() {
            $.ajax({
                url:"/product/search/book",
                type:"get",
                success: function f(data) {
                    console.log("getPages:");
                    console.log(data)
                    Pages=data.pages;
                }
            })
        }
        function getFileByPages() {
            $.ajax({
                url:"/product/search/book",
                type: "get",
                data: {
                    "pageNum":PageNumber.toString(),
                    "bookname":$.getUrlParam("bookname")
                },
                success: function f(data) {
                    Pages=data.pages;
                    console.log("getFileByPages:");
                    console.log(PageNumber);
                    console.log("getFileByPages:");
                    console.log(data);
                    $("#total").empty();
                    for(let i=0;i<data.list.length;i++) {
                        var urls="/index/detail/"+data.list[i].bookid;
                        console.log(urls)
                        $("#total").append("<div class='list' id='"+data.list[i].bookname+"' style=\"width: 18%;height: 220px;background-color:white;margin: 6px\">\n"+
                            "<img src=\"../../static/image/detail/"+data.list[i].bookname+".png\" style=\"width: 150px;height:170px;margin-left: 20px;margin-top: 10px\">\n"+
                            "<div style=\"margin-top: 4px;font-size: 20px;padding-left: 15px\">"+
                            `<a style='text-decoration: none;color: blue' href="${urls}">《`+data.list[i].bookname+`》</a>`+
                            "</div>\n"+
                            "</div>");
                    }
                }
            })
        }
        function currentPage() {
            document.getElementById("currentpage").innerText="(当前第"+PageNumber+"页";
            document.getElementById("totalpage").innerText="共"+Pages+"页)";
        }
        window.onload=function () {
            getFileByPages();
            currentPage();
            /*上一页*/
            document.getElementById("pro").onclick = function () {
                if (PageNumber - 1 > 0) {
                    PageNumber = PageNumber - 1;
                    getFileByPages();
                    currentPage();
                }
            }
            /*下一页*/
            document.getElementById("next").onclick = function () {
                // alert(123);
                console.log(PageNumber);
                console.log(Pages);
                if (PageNumber < Pages) {
                    PageNumber = PageNumber + 1;
                    console.log(PageNumber);
                    getFileByPages();
                    currentPage();
                }
            }
            /*首页*/
            document.getElementById("first").onclick = function () {
                PageNumber = 1;
                // console.log("headPage:"+PageNumber);
                getFileByPages();
                currentPage();
            }
            /*尾页*/
            document.getElementById("last").onclick = function () {
                getPages();
                PageNumber = Pages;
                console.log(PageNumber);
                getFileByPages();
                currentPage();
            }
        }
    </script>
{% endblock %}

{% block body %}
<!--返回首页-->
<div id="fanhui">
    <span id="sp1"><a style="text-decoration: none" href="{{ url_for("index.index") }}">首页</a></span>&nbsp/
    <span>查询</span>
</div>
<!--详细书籍-->
<div id="total">
</div>
<!--分页-->
<div id="fenye">
    <button id="first">首页</button>
    <button id="pro">上一页</button>
    <button id="next">下一页</button>
    <button id="last">尾页</button>
    <a id="currentpage" style="font-size: small"></a>
    <a id="totalpage" style="font-size: small"></a>
</div>
{% endblock %}